import { ref, onMounted } from 'vue'
import store from '@/store'
import { defineStore } from 'pinia'
import { DepositRefundType } from '@/types/enum'
import { queryDepositRefundTableCol } from '@/api/expense/types/expense'
import { queryDepositRefund } from '@/api/expense'
import { useTable } from '@/hooks/useTable'
import { getToken } from '@/utils/cache/cookies'
export const useDepositRefundStore = defineStore(
  'depositRefund',
  () => {
    const currentOuterTab = ref<string>('long')
    const currentInnerTab = ref<DepositRefundType>('all')
    const form = ref({
      phone: '',
      orderId: '',
      orderDetailId: '',
      orderType: '',
      status: currentInnerTab.value,
      submitter: ''
    })
    const {
      data,
      loading,
      pagination,
      load,
      handleCurrentChange,
      handleSizeChange,
      setCurrentPage
    } = useTable<queryDepositRefundTableCol>(queryDepositRefund, getToken() ?? '', () => form.value)

    const updateFormData = (newData: any) => {
      form.value = { ...form.value, ...newData }
    }

    const setInnerTab = (tab: DepositRefundType) => {
      currentInnerTab.value = tab
    }
    const refreshTable = () => {
      form.value.status = currentInnerTab.value
      load()
    }
    onMounted(() => {
      refreshTable()
    })
    return {
      setInnerTab,
      data,
      loading,
      pagination,
      handleCurrentChange,
      handleSizeChange,
      setCurrentPage,
      currentOuterTab,
      currentInnerTab,
      updateFormData,
      refreshTable,
      form
    }
  },
  {
    persist: true
  }
)
/** 在 setup 外使用 */
export function useDepositRefundStoreHook() {
  return useDepositRefundStore(store)
}
